<template>
    <div class="air">

        <el-dialog
            title="发票"
            width="95%"
            :visible.sync="showDialog"
            @close="closeBox"
            :modal-append-to-body="false"
        >
        <!-- <img src="./333.png" alt=""> -->
            <div class="flexContiner" :class=" isIEBrowser()?'ieClass':''">
                <div class="info">
                    <div class="infoTitle" style="margin-bottom: 10px">
                        <div style="display: flex; align-items: center">
                            <span class="goldfontColor">国内国际标识：<span class="fontColor">{{ tdysInfo.gngjbz }}</span></span>
                        </div>

                        <div style="border-bottom: thick double #a25619">
                            <span
                             class="goldfontColor"
                                style="
                                    font-size: 32px !important;
                                "
                            >
                                电子发票
                            </span>
                            <span
                                style="
                                    font-size: 32px !important;
                                "
                                class="goldfontColor"
                            >
                                （{{ '航空运输电子客票行程单' }}）
                            </span>
                        </div>
                        <div
                            style="
                                display: flex;
                                flex-direction: column;
                                height: 48px;
                                justify-content: space-around;
                                margin-top: 5px;
                            "
                            class="goldfontColor"
                        >
                            <div>
                                <span>发票号码：</span>
                                <span class="fontColor">{{ tdysInfo.fphm }}</span>
                            </div>
                            <div>
                                <span class="goldfontColor">开票日期：</span>
                                <span class="fontColor">{{ tdysInfo.kprq }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 整体发票区域 -->
                <div class="invoice-area">
                    <div class="box1">
                        <div class="box1Name goldfontColor">
                            旅客姓名：
                            <span class="fontColor">{{ tdysInfo.xm }}</span>
                        </div>
                        <div class="box1Card goldfontColor">
                            有效身份证件号码：
                            <span class="fontColor">{{ tdysInfo.zjhm }}</span>
                        </div>
                        <div class="box1Tag goldfontColor">
                            签注：
                            <span class="fontColor">{{ tdysInfo.qz }}</span>
                        </div>
                    </div>
                    <div class="box2">
                        <tableList
                            ref="tableRef"
                            border
                            maxHeight="400"
                            :keySet="keySet"
                            :autoHeight="true"
                            :tableData="tdysmxList"
                        >
                            <!--
                            <template #chyydm="{ row }">
                                <div>
                                    {{ chyyMap[row.chyydm] }}
                                </div>
                            </template> -->
                        </tableList>
                    </div>
                    <div class="box3">
                        <div class="box3Price box3Common">
                            票价：
                            <span class="fontColor">{{ infoFormData.hjje }}</span>
                        </div>
                        <div class="box3ryfjf box3Common">
                            燃油附加费：
                            <span class="fontColor">{{ infoFormData.hjse }}</span>
                        </div>
                        <div class="box3zzsl box3Common">
                            增值税税率：
                            <span class="fontColor">{{ 0.06 }}</span>
                        </div>
                        <div class="box3zzsse box3Common">
                            增值税税额：
                            <span class="fontColor">{{ infoFormData.hjse }}</span>
                        </div>
                        <div class="box3mhfzjj box3Common">
                            民航发展基金：
                            <span class="fontColor">{{ infoFormData.hjje }}</span>
                        </div>
                        <div class="box3OtherSF box3Common">
                            其他税费：
                            <span class="fontColor">{{ infoFormData.hjse }}</span>
                        </div>
                        <div class="box3Count box3Common">
                            合计：
                            <span class="fontColor">{{ infoFormData.hjje }}</span>
                        </div>
                    </div>
                    <div class="box4">
                        <div class="box4EInvoiceNo box4Common">
                            电子发票号码：
                            <span class="fontColor">{{ infoFormData.fphm }}</span>
                        </div>
                        <div class="box4message box4Common">
                            验证码：
                            <span class="fontColor">{{ '11'|| infoFormData.yzm }}</span>
                        </div>
                        <div class="box4TipMessage box4Common">
                            提示信息：
                            <span class="fontColor">{{'11'||  infoFormData.tsxx }}</span>
                        </div>
                        <div class="box4BXF">
                            <div class="goldfontColor">
                                保险费：
                                <span class="fontColor">{{'11'||  infoFormData.bxf }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="box5">
                        <div class="box5XSWDDH box5Common">
                            销售网点代号：
                            <span class="fontColor">{{ '11'||infoFormData.xswddh }}</span>
                        </div>
                        <div class="box5TKDW box5Common">
                            填开单位：
                            <span class="fontColor">{{ '11'||infoFormData.tkdw }}</span>
                        </div>
                        <div class="box5TKRQ box5Common">
                            填开日期：
                            <span class="fontColor">{{ infoFormData.kprq }}</span>
                        </div>
                    </div>
                    <div class="box6">
                        <div class="box6Name box6Common">
                            购买方名称：
                            <span class="fontColor">{{ infoFormData.gmfmc }}</span>
                        </div>
                        <div class="box6No box6Common">
                            统一社会信用代码/纳税人识别号：
                            <span class="fontColor">{{ infoFormData.gmfnsrsbh }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
  <script>
import { getDefBIzdictByLxdm } from '@/api/vmsClassifyCode.js'
import tableList from '@/components/tableList/index.vue'
import isIEBrowser from '@/utils/isIe'

export default {
    name: 'airTransport',
    data() {
        return {
            infoFormData: {
                fphm: '',
                sfwzzfp: '',
                kprq: '',
                kjhzfpdydlzfphm: '',
                fppzDm: '',
                tdyslxDm: '',
                gmfnsrsbh: '',
                gmfmc: '',
                gmfdz: '',
                gmflxdh: '',
                xsfnsrsbh: '',
                xsfmc: '',
                xsfdz: '',
                xsflxdh: '',
                gmfjbr: '',
                jbrsfzjhm: '',
                jbrlxdh: '',
                kpr: '',
                skr: '',
                fhr: '',
                jshj: '',
                shjdx: '',
                jsfsDm: '',
                hjje: '',
                hjse: '',
                kprsrrzdzxx: '',
                sjkpdzxx: '',
                htbh: '',
                nsywfssj: '',
                jbrsfzjzlDm: '',
                sflzfpbz: '',
                zzsjzjtDm: '',
                bz: '',
                spsl: '',
                cktslDm: '',
                hwxx: [],
                tdys: {
                    fphm: '',
                    gngjbz: '',
                    gpdh: '',
                    sflzfpbz: '',
                    xm: '',
                    zjhm: '',
                    qz: '',
                    dzkphm: '',
                    yzm: '',
                    tsxx: '',
                    bxf: '',
                    xswddh: '',
                    tkdw: '',
                    kprq: '',
                    xsfmc: '',
                    xsfnsrsbh: '',
                    gmfmc: '',
                    gmfnsrsbh: '',
                    tdysmx: [],
                },
            },
            tdysInfo: {},
            keySet: [
                {
                    label: '承运人',
                    englishName: 'cyr',
                },
                {
                    label: '航班号',
                    englishName: 'hbh',
                },
                {
                    label: '始发站',
                    englishName: 'sfz',
                },
                {
                    label: '目的站',
                    englishName: 'mdz',
                },
                {
                    label: '座位等级',
                    englishName: 'zwdj',
                    width: 'labelWidth',
                },
                {
                    label: '日期',
                    englishName: 'cyrq',
                    // width: 'labelWidth',
                    // isSlot: true,
                    // slotName: 'ykjhzfpbz',
                },

                {
                    label: '时间',
                    englishName: 'qfsj',
                },
                {
                    label: '客票级别/客票类别',
                    englishName: 'kpjbkplb',
                },
                {
                    label: '客票生效日期',
                    englishName: 'kpsxrq',
                },

                {
                    label: '有效截止日期',
                    englishName: 'yxjzrq',
                },

                {
                    label: '免费行李',
                    englishName: 'mfxle',
                },
            ],
            showDialog: false,
            tdysmxList: [
                {
                    cyr: '刘传健',
                    hbh: '川航8633',
                    zwdj: '驾驶舱',
                    cyrq: '2018年5月14日',
                    qfsj: '07:46',
                    kpjbkplb: 'A',
                    kpsxrq: '2018年5月14日',
                    yxjzrq: '2018年5月15日',
                    mfxle: '无',
                },
            ],
        }
    },
    created() {},
    methods: {
        isIEBrowser(){
           return isIEBrowser()
        },
        getDict() {
            // getDefBIzdictByLxdm({
            //     lxdm: 'VMS_TDYSBQGL',
            // }).then(
            //     ({ data }) => {
            //         if (Array.isArray(data)) {
            //             this.tedingyaosuSelect = data.filter((item) => {
            //                 return item.lxxdm == '05' || item.lxxdm == '06'
            //             })
            //         } else {
            //             this.tedingyaosuSelect = []
            //         }
            //     },
            //     (err) => {}
            // )
        },

        resetData() {
            // 整体表单
            this.infoFormData = {}
        },

        emptyUtil(val) {
            if (
                typeof val === 'undefined' ||
                val === '' ||
                val === null ||
                val === 0
            ) {
                return true
            } else {
                return false
            }
        },

        closeBox() {
            this.showDialog = false
        },
        detailCopy(d) {
            this.infoFormData = d
            this.tdysInfo = d.tdys
            this.tdysmxList = d.tdys.tdysmx
        },
        show(row) {
            this.resetData()
            setTimeout(() => {
                this.detailCopy({
                    fphm: '发票号码',
                    sfwzzfp: '是否为纸质发票',
                    kprq: '开票日期',
                    kjhzfpdydlzfphm: '开具红字发票对应的蓝字发票号码',
                    fppzDm: '发票票种代码',
                    tdyslxDm: '特定要素类型代码',
                    gmfnsrsbh: '购买方纳税人识别号',
                    gmfmc: '购买方名称',
                    gmfdz: '购买方地址',
                    gmflxdh: '购买方联系电话',
                    xsfnsrsbh: '销售方纳税人识别号',
                    xsfmc: '销售方名称',
                    xsfdz: '销售方地址',
                    xsflxdh: '销售方联系电话',
                    gmfjbr: '购买方经办人',
                    jbrsfzjhm: '经办人身份证件号码',
                    jbrlxdh: '经办人联系电话',
                    kpr: '开票人',
                    skr: '收款人',
                    fhr: '付汇人',
                    jshj: '价税合计',
                    jshjdx: '价税合计（大写）',
                    jsfsDm: '结算方式代码',
                    hjje: '123456789.88',
                    // hjje: '合计金额（合计不含税金额）',
                    hjse: '1234.99',
                    // hjse: '合计税额',
                    kprsrrzdzxx: '开票人实人认证地址信息',
                    sjkpdzxx: '手机开票地址信息',
                    htbh: '合同编号',
                    nsywfssj: '纳税义务发生时间',
                    jbrsfzjzlDm: '经办人身份证件种类',
                    sflzfpbz: '是否蓝字发票标志',
                    zzsjzjtDm: '增值税即征即退代码',
                    bz: '备注',
                    spsl: '商品数量',
                    cktslDm: '出口退税类代码',
                    hwxx: [
                        {
                            xh: '序号',
                            xmmc: '项目名称',
                            hwhyslwfwmc: '货物或应税劳务、服务名称',
                            spfwjc: '商品服务简称',
                            sphfwssflhbbm: '商品和服务税收分类合并编码',
                            je: '金额',
                            sl1: '税率',
                            se: '税额',
                            kce: '扣除额',
                        },
                        {
                            xh: '序号',
                            xmmc: '项目名称',
                            hwhyslwfwmc: '货物或应税劳务、服务名称',
                            spfwjc: '商品服务简称',
                            sphfwssflhbbm: '商品和服务税收分类合并编码',
                            je: '金额',
                            sl1: '税率',
                            se: '税额',
                            kce: '扣除额',
                        },
                    ],
                    tdys: {
                        fphm: '2344200000003191',
                        gngjbz: '国内国际标识',
                        gpdh: 'GP单号',
                        sflzfpbz: '是否蓝字发票标志',
                        xm: '姓名',
                        zjhm: '证件号码',
                        qz: '签注',
                        dzkphm: '电子客票号码',
                        yzm: '验证码',
                        tsxx: '提示信息',
                        bxf: '保险费',
                        xswddh: '销售网点代号',
                        tkdw: '填开单位',
                        kprq: '开票日期',
                        xsfmc: '销售方名称',
                        xsfnsrsbh: '销售方纳税人识别号',
                        gmfmc: '购买方名称',
                        gmfnsrsbh: '购买方纳税人识别号',
                        tdysmx: [
                            {
                                sfz: '始发站',
                                mdz: '目的站',
                                hd: '航段',
                                cyr: '承运人',
                                hbh: '航班号',
                                zwdj: '座位等级',
                                cyrq: '承运日期',
                                qfsj: '起飞时间',
                                kpjbkplb: '客票级别/客票类别',
                                kpsxrq: '客票生效日期',
                                yxjzrq: '有效截止日期',
                                mfxle: '免费行李额',
                            },
                            {
                                sfz: '始发站',
                                mdz: '目的站',
                                hd: '航段',
                                cyr: '承运人',
                                hbh: '航班号',
                                zwdj: '座位等级',
                                cyrq: '承运日期',
                                qfsj: '起飞时间',
                                kpjbkplb: '客票级别/客票类别',
                                kpsxrq: '客票生效日期',
                                yxjzrq: '有效截止日期',
                                mfxle: '免费行李额',
                            },
                        ],
                    },
                })

                this.showDialog = true
            }, 200)
        },
    },
    components: {
        tableList,
    },
}
</script>
  <style lang="scss" scoped>
$InvoiceBorderColor: black;
$fontColor: #414141;
$goldfontColor: #a25619;

.flexContiner {
    overflow: auto;
    // height: 90vh;
    .infoTitle {
        display: flex;
        justify-content: space-between;
    }
    .fontColor{
        color: $fontColor;
    }
    .goldfontColor{
        color: $goldfontColor;
    }
    .box1 {
        display: flex;
        width: 100%;
        display: flex;
        .box1Name {
            width: 20%;
            height: 40px;
            display: flex;
            justify-content: start;
            align-items: center;
            padding-left: 6px;
            border: 1px solid $InvoiceBorderColor;
        }
        .box1Card {
            width: 40%;
            height: 40px;
            display: flex;
            justify-content: start;
            align-items: center;
            padding-left: 6px;
            border: 1px solid $InvoiceBorderColor;
            border-right: none;
            border-left: none;
        }
        .box1Tag {
            width: 40%;
            height: 40px;
            display: flex;
            justify-content: start;
            align-items: center;
            padding-left: 6px;
            border: 1px solid $InvoiceBorderColor;
        }
    }
    .box2 {
        width: 100%;
        border: 1px solid $InvoiceBorderColor;
        border-top: none;
        border-bottom: none;
    }
    .box3 {
        display: flex;
        width: 100%;
        .box3Common {
            border: 1px solid $InvoiceBorderColor;
            display: flex;
            justify-content: start;
            align-items: center;
            padding-left: 6px;
            height: 30px;
            color: $goldfontColor;
        }
        .box3Price {
            width: 20%;
        }
        .box3ryfjf {
            width: 13%;
            border-right: none;
            border-left: none;
        }
        .box3zzsl {
            width: 12%;
        }
        .box3zzsse {
            width: 12%;
            border-right: none;
            border-left: none;
        }
        .box3mhfzjj {
            width: 16%;
        }
        .box3OtherSF {
            width: 12%;
            // border-right: none;
            border-left: none;
        }
        .box3Count {
            border-left: none;
            width: 15%;
        }
    }
    .box4 {
        display: flex;
        width: 100%;
        border: 1px solid $InvoiceBorderColor;
        border-top: none;
        .box4Common {
            display: flex;
            height: 30px;
            justify-content: start;
            align-items: center;
            padding-left: 6px;
            color: $goldfontColor;
        }
        .box4EInvoiceNo {
            width: 30%;
        }
        .box4message {
            width: 15%;
            border-right: none;
            border-left: none;
        }
        .box4TipMessage {
            width: 40%;
        }
        .box4BXF {
            width: 15%;
            border-right: none;
            border-left: none;
            border-left: 1px solid $InvoiceBorderColor;
            display: flex;
            height: 30px;
            justify-content: start;
            align-items: center;
            padding-left: 6px;
        }
    }
    .box5 {
        display: flex;
        width: 100%;
        border: 1px solid $InvoiceBorderColor;
        border-top: none;
        .box5Common {
            display: flex;
            height: 30px;
            justify-content: start;
            align-items: center;
            padding-left: 6px;
            color: $goldfontColor;
        }
        .box5XSWDDH {
            width: 30%;
        }
        .box5TKDW {
            width: 55%;
        }
        .box5TKRQ {
            width: 15%;
        }
    }
    .box6 {
        display: flex;
        width: 100%;
        border: 1px solid $InvoiceBorderColor;
        border-top: none;
        .box6Common {
            display: flex;
            height: 30px;
            justify-content: start;
            align-items: center;
            padding-left: 6px;
            color: $goldfontColor;
        }
        .box6Name {
            width: 45%;
        }
        .box6No {
            width: 55%;
        }
    }
}

.ieClass{
    padding-bottom: 20px;
}
.invoice-area {
    position: relative;
    min-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
::v-deep .el-dialog{
    background: #f5f8fb;
}
::v-deep .el-dialog__body {
    padding-top: 0px;
}
</style>
  